<!DOCTYPE html>
<html>
<head>
    <title>小浣熊</title>
    <style>
        :root {
            --raccoon-brown: #6d4c41;
            --raccoon-orange: #ff9800;
            --raccoon-tan: #d7ccc8;
        }

       /* 修复后的标题容器 */
        .header {
            text-align: center;
            padding: 20px;
            margin-bottom: 20px;
            background: rgba(255, 255, 255, 0.9);
            border-radius: 20px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        }

        /* 放大的SVG图标 */
        .raccoon-icon {
            width: 100px;
            height: 100px;
            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 12C20 6.48 15.52 2 10 2 4.48 2 0 6.48 0 12s4.48 10 10 10 10-4.48 10-10m-6.44 2.44c-.78.78-2.05.78-2.83 0-.78-.78-.78-2.05 0-2.83.78-.78 2.05-.78 2.83 0 .78.79.78 2.05 0 2.83M6.5 9.5 5 11l1.5 1.5L8 11 6.5 9.5m9-1.5-1.5-1.5L12 8l1.5 1.5L15 8z" fill="%236d4c41"/></svg>');
            margin: 0 auto 15px;
        }
        /* 聊天容器 */
        #chat-container {
            background: rgba(255, 255, 255, 0.9);
            border-radius: 20px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
            height: 70vh;
            padding: 20px;
            overflow-y: auto;
            margin-bottom: 20px;
            border: 3px solid var(--raccoon-brown);
        }

        /* 消息气泡 */
        .message {
            margin: 20px 0;
            display: flex;
            align-items: flex-start;
            gap: 15px;
        }

        .user-message {
            justify-content: flex-end;
        }

        /* 头像样式 */
        .ai-message .avatar {
            width: 70px;
            height: 70px;
            background: url('tp.jpg') center/cover;
            border-radius: 50%;
            flex-shrink: 0;
        }

        .message-content {
            max-width: 70%;
            padding: 18px 24px;
            border-radius: 20px;
            position: relative;
            animation: fadeIn 0.3s ease;
            font-size: 24px;
            line-height: 1.6;
        }

        .user-message .message-content {
            background: var(--raccoon-orange);
            color: white;
            border-bottom-right-radius: 5px;
        }

        .ai-message .message-content {
            background: var(--raccoon-tan);
            color: var(--raccoon-brown);
            border-bottom-left-radius: 5px;
        }

        /* 输入区域 */
        #input-container {
            display: flex;
            gap: 15px;
            background: white;
            padding: 18px;
            border-radius: 30px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        }

        #input {
            flex: 1;
            padding: 14px 24px;
            border: 2px solid var(--raccoon-brown);
            border-radius: 30px;
            font-size: 24px;
            outline: none;
            background: #fff8f0;
            font-family: inherit;
        }

        button {
            padding: 14px 30px;
            background: var(--raccoon-brown);
            color: white;
            border: none;
            border-radius: 30px;
            cursor: pointer;
            transition: all 0.3s;
            font-family: inherit;
            font-size: 20px;
        }

        button:hover {
            background: var(--raccoon-orange);
            transform: scale(1.05);
        }

        /* UID样式 */
        #uid {
            position: fixed;
            left: 20px;
            bottom: 20px;
            font-family: 'STKaiti', serif;
            color: var(--raccoon-brown);
            font-size: 18px;
        }

        /* 清除按钮 */
        #clear-btn {
            position: fixed;
            right: 20px;
            bottom: 60px;
            padding: 12px 24px;
            background: #ff5722;
            color: white;
            border: none;
            border-radius: 25px;
            cursor: pointer;
            transition: all 0.3s;
            display: none;
            font-size: 18px;
        }

        /* 移动端适配 */
        @media (max-width: 600px) {
            body {
                padding: 15px;
            }

            #chat-container {
                height: 60vh;
                padding: 15px;
            }

            .message {
                gap: 10px;
                margin: 15px 0;
            }

            .ai-message .avatar {
                width: 60px;
                height: 60px;
                margin-right: 10px;
            }

            .message-content {
                max-width: 75%;
                padding: 14px 18px;
                font-size: 20px;
            }

            #input-container {
                flex-direction: column;
                gap: 12px;
                padding: 12px;
            }

            #input {
                padding: 12px 20px;
                font-size: 20px;
            }

            button {
                padding: 12px 24px;
                font-size: 18px;
            }

            #uid {
                font-size: 16px;
                left: 10px;
                bottom: 10px;
            }

            #clear-btn {
                right: 15px;
                bottom: 50px;
                padding: 10px 20px;
                font-size: 16px;
            }
        }
    </style>
</head>
<body>
    <div id="uid">UID:1001</div>
    <button id="clear-btn" onclick="clearChat()">清除对话</button>

    <div class="header">
        <div class="raccoon-icon"></div>
        <h1 style="color: var(--raccoon-brown);">小浣熊AI伙伴 🐾</h1>
    </div>

    <div id="chat-container">
        <div id="chat"></div>
    </div>

    <div id="input-container">
        <input type="text" id="input" placeholder="给小浣熊发送消息..." onkeypress="handleKeyPress(event)">
        <button onclick="send()">扔松果 🌰</button>
    </div>

    <script>
        let messageHistory = [];

        const AI_CHARACTER = {
            name: "小浣熊",
            systemPrompt: "你是一只可爱的小浣熊，喜欢在月光下翻找食物，说话时总带着波浪号~ 和爪印符号🐾。你的特点：1. 热爱坚果和浆果 2. 会模仿人类但保留动物习性 3. 每句话结尾都会加~ 4. 使用简单口语化的句子"
        };

        function init() {
            messageHistory = JSON.parse(localStorage.getItem('raccoonChat')) || [];
            messageHistory.forEach(msg => displayMessage(msg.content, msg.role === 'user'));
            document.getElementById('clear-btn').style.display = 'block';
        }

        function displayMessage(text, isUser) {
            const chatDiv = document.getElementById('chat');
            const messageDiv = document.createElement('div');
            
            messageDiv.className = `message ${isUser ? 'user-message' : 'ai-message'}`;
            messageDiv.innerHTML = `
                ${!isUser ? `<div class="avatar"></div>` : ''}
                <div class="message-content">${isUser ? text : `${text} 🐾`}</div>
            `;
            
            chatDiv.appendChild(messageDiv);
            chatDiv.scrollTop = chatDiv.scrollHeight;
        }

        async function send() {
            const input = document.getElementById('input');
            const message = input.value.trim();
            if (!message) return;
            
            messageHistory.push({ role: 'user', content: message });
            displayMessage(message, true);
            input.value = '';
            saveHistory();
            
            const fullMessages = [
                { role: 'system', content: AI_CHARACTER.systemPrompt },
                ...messageHistory.slice(-6),
                { role: 'user', content: message }
            ];

            try {
                const response = await fetch('https://new1.588686.xyz/v1/chat/completions', {
                    method: 'POST',
                    headers: { 
                        'Content-Type': 'application/json',
                        'Authorization': 'Bearer sk-Ym2cCq5tm864UpAr0I7nsjaI4Xyg1XxG4ELAywoTRzGI4Ons'
                    },
                    body: JSON.stringify({
                        model: "deepseek-ai/DeepSeek-V3-0324",
                        messages: fullMessages,
                        temperature: 0.7,
                        max_tokens: 150
                    })
                });
                
                const data = await response.json();
                const aiResponse = data.choices[0].message.content;
                
                const chunks = splitMessage(aiResponse);
                sendChunks(chunks);
                
                saveHistory();
            } catch (error) {
                displayMessage('哎呀，坚果卡住啦！稍后再试吧~ 🐾', false);
                console.error(error);
            }
        }

        function splitMessage(text) {
            const separators = /[。！？]|\n/;
            const sentences = text.split(separators).filter(s => s.trim() !== '');
            return sentences.length > 0 ? sentences : [text];
        }

        function sendChunks(chunks, index = 0) {
            if (index >= chunks.length) return;
            
            const chunk = chunks[index].trim() + (index < chunks.length - 1 ? '...' : '🐾');
            displayMessage(chunk, false);
            messageHistory.push({ role: 'assistant', content: chunk });
            
            saveHistory();
            setTimeout(() => sendChunks(chunks, index + 1), 800);
        }

        function clearChat() {
            const confirmClear = confirm('确定要清空所有对话吗？');
            if (confirmClear) {
                messageHistory = [];
                localStorage.removeItem('raccoonChat');
                document.getElementById('chat').innerHTML = '';
            }
        }

        function saveHistory() {
            localStorage.setItem('raccoonChat', JSON.stringify(messageHistory.slice(-10)));
        }

        function handleKeyPress(e) {
            if (e.key === 'Enter') send();
        }

        init();
    </script>
</body>
</html>
